<script setup lang="ts">
import { ref } from 'vue'
import { router } from '@util/RouterUtil.ts'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { TypeUser } from '@src/interfaces/TypeUser.ts'
import { userLoginApi } from '@src/apis/userApi.ts'
import TokenUtil from '@util/TokenUtil.ts'
import FixedCalendar from '@src/components/FixedCalendar.vue'

const formRef = ref<FormInstance>()
const formData = ref<TypeUser>({
  account: '',
  password: '',
})
const formRules = ref<FormRules<typeof formData>>({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { max: 11, message: '不超过11位', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { max: 11, message: '不超过11位', trigger: 'blur' },
  ],
})

/**
 * 用户登录
 */
const login = () => {
  formRef.value?.validate((valid) => {
    if (!valid) return
    userLoginApi(formData.value).then(({ data: token }) => {
      ElMessage.success('登录成功')
      TokenUtil.setToken(token)
      toHome()
    })
  })
}

/**
 * 跳转到注册页面
 */
const toRegister = () => {
  router.push('/register')
}

/**
 * 跳转到首页
 */
const toHome = () => {
  router.push('/')
}

/**
 * 跳转到管理员登录页面
 */
const toAdminLogin = () => {
  router.push('/login/admin')
}
</script>

<template>
  <div>
    <FixedCalendar />
    <div class="page-container">
      <el-text class="to-admin-login" @click="toAdminLogin">管理员登录</el-text>
      <div class="login-box border-animation">
        <h2 class="title">
          <el-text>用户登录</el-text>
        </h2>
        <el-form
          ref="formRef"
          :rules="formRules"
          :model="formData"
          label-width="80"
        >
          <el-form-item label="账号" prop="account">
            <el-input
              v-model="formData.account"
              placeholder="account"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="formData.password"
              placeholder="password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="success" @click="login">登录</el-button>
          </el-form-item>
          <el-form-item label-width="0">
            <el-button type="danger" @click="toRegister">注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.border-animation {
  backdrop-filter: blur(5px);
  box-shadow: 0 0 5px #63a1b2;
  /*动画周期3S 线性 无限循环*/
  animation: animate 3s linear infinite;

  @keyframes animate {
    0% {
      filter: drop-shadow(0px 0px 0px #63a1b2);
    }
    50% {
      filter: drop-shadow(5px 5px 5px #63a1b2);
    }
    100% {
      filter: drop-shadow(0px 0px 0px #63a1b2);
    }
  }
}

.page-container {
  width: 100%;
  height: 100vh;
  display: flex;

  .to-admin-login {
    font-size: 10px;
    text-decoration: underline;
    position: fixed;
    top: 10px;
    right: 10px;

    &:hover {
      color: var(--el-color-danger);
    }
  }

  .login-box {
    margin: auto;
    width: 500px;
    border: var(--el-border);
    border-radius: var(--el-border-radius-base);
    padding: 10px;

    .title {
      text-align: center;

      .el-text {
        font-size: 2em;
      }
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>
